@charset 'utf-8';
.mysterious-icon { background:url(http://pic.51wan.com/hd/treasures/i/icon.png) no-repeat 0 bottom; }
.mysterious-fl { float: left; }
.mysterious-fr { float: right; }
.mysterious { display: none; width: 597px; font-family: 'microsoft yahei'; border-radius: 6px 6px 0 0; overflow: hidden; transition: all 0.4s ease-in-out 0s; transform-origin: top left; }
.mysterious-none { transition-duration: 0s; }
.mysterious-hide { transform: scale(0,0); }
.mysterious-title { padding-top: 15px; height: 64px; line-height: 32px; text-align: center; color: #FFF; }
.mysterious-title div { font-size: 18px;}
.mysterious-title span {  font-size: 25px; font-weight: bold; }
.mysterious-title a { position: absolute; top: 16px; right: 16px; width: 26px; height: 26px; background-position: -600px 0; transition: all 0.3s ease-in-out 0s; }
.mysterious-title a:hover { transform: rotate(-360deg); }
.mysterious-content {}
.mysterious-gift-wrap { margin: 28px auto 0; width: 225px; height: 105px;}
.mysterious-gift-wrap2 { width: 574px;}
.mysterious-gift-wrap2 .mysterious-gift { display: inline-block; float: left; margin: 0 31px; }
.mysterious-gift { position: relative; width: 225px;}
.mysterious-gift a { display: block; width: 100%; height: 75px; text-decoration: none; cursor: default;}
.mysterious-gift a:hover div { display: block; }
.mysterious-gift img { display: block; width: 100%; vertical-align: middle; }
.mysterious-gift div { display: none; position: absolute; top: 0; left: 0; padding-top: 18px; width: 100%; height: 57px; background-color: rgba(255,150,0,0.8); font-size: 12px; line-height: 22px; text-align: center; color: #FFF; }
.mysterious-gift div span { font-size: 22px; font-weight: bold; }
.mysterious-gift p { margin: 0; padding-top: 8px; font-size: 14px; height: 22px; line-height: 22px; color: #FFF; text-align: center; }
.mysterious-gift i { position: absolute; top: -5px; left: -12px; padding: 2px 7px 0; width: 12px; height: 78px; background-position: -600px -90px; font-size: 12px; line-height: 16px; color: #FFF; text-align: center; font-style: normal;}
.mysterious-btn { margin: 0 auto; padding: 52px 0 28px; width: 276px; height: 41px; }
.mysterious-btn a { display: block; width: 118px; height: 41px; background-position: -600px -40px; font-size: 14px; line-height: 41px; color: #E13334; text-align: center; text-decoration: none;}
/* usercard */
.usercard_treasures { margin: 1px; width: 21px; height: 21px; }
.usercard_treasures { background:url(http://pic.51wan.com/hd/treasures/i/treasures.png); _background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://pic.51wan.com/hd/treasures/i/treasures.png');}
.usercard_treasures:hover { margin: 0; border: 1px solid #CD9900; background-color: #FFCC33; }
/*  */
.userCARDS_viplvl .userCARDS_diamond { margin-right:29px; }
.userCARDS_viplvl .usercard_treasures { margin: 0 20px 0 0; }
.userCARDS_viplvl .usercard_treasures:hover { margin-right: 20px; border:0; background-color:transparent; }
/* topbar */
.topbar_treasures {position: relative; top: 11px; display: inline-block; float: left; width: 18px; height: 12px; margin-left: 10px; background: url(http://pic.51wan.com/hd/treasures/i/treasures.jpg) no-repeat;}
/* animate */
.animated {-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}
.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}
@-webkit-keyframes swing{
  10%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}
  20%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}
  30%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}
  40%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}
  50%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}
}
@keyframes swing{
  10%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}
  20%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}
  30%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}
  40%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}
  50%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}
}
